<template>
  <div>
    <div style="width:20%">
      <h3>专业计划</h3>
      <Divider style="height: 2px;margin:15px 0;display: inline-block;" />
    </div>
    <div style="width:80%">
      <h4 style="float: left">专业计划设置：</h4>
      <Button id="b1" @click="exit()">退出</Button>
      <Divider style="height: 2px;margin:15px 0;display: inline-block;" />
    </div>
    <Form style="width: 60%;" ref="formPlan" :model="formPlan" :rules="rulePlan" :label-width="120">
      <br><br><br><b id="text" style="font-size: 1rem;"></b><br><br><br><br>
      <FormItem label="专业计划" prop="mvId">
        <Select v-model="formPlan.mvId" clearable style="width:200px">
          <Option v-for="item in PlanList" :value="item.mvId" :key="item.mvId  ">{{ item.mvName }}</Option>
        </Select>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('formPlan')">保存编辑</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        formPlan: {
          mvId: ''
        },
        rulePlan: {
          mvId: [{
            required: true,
            message: '专业计划不能为空',
            trigger: 'change'
          }]
        },
        Examination: [],
        esId: '0',
        PlanList: []
      }
    },
    created() {
      this.getParams()
      this.$axios.get(this.$host + '/professional/plan/majorVersions?pageNum=1&&pageSize=100').then(res => {
        console.log(res)
        this.PlanList = res.data.data.list
        document.getElementById("text").innerHTML = "考次编码：" + this.esId
      })
    },
    watch: {
      '$route': 'getParams'
    },
    methods: {
      getParams() {
        this.esId = this.$route.query.esId
      },
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$axios.put(this.$host + '/examination/plan/examSessionMessage', {
              esId: this.esId,
              mvId: this.formPlan.mvId
            }).then(res => {
              console.log(res)
              if (res.data.message == '更新考次信息成功') {
                this.$Message.success('设置专业计划成功!');
                this.$router.push({
                  name: 'ExamSessionWithoutPlan'
                })
              }
            })
          } else {
            this.$Message.error('设置失败!');
          }
        })
      },
      exit() {
        this.$router.push({
          name: 'ExamSessionWithoutPlan'
        })
      }
    }
  }
</script>

<style scoped>
  h3 {
    font-size: 1.75rem;
    float: left;
  }

  #b1 {
    float: right;
    background-color: burlywood;
  }
</style>
